<!-- 客户管理页面 -->
<template>
	<view class="customer-container-box">
		<!-- 客户数据为空时显示的信息 -->
		<data-null tipText="暂无客户数据" v-if="!cusDataList.length"></data-null>
		<block v-else>
			<view class="cus-item" v-for="cusItem in cusDataList" :key="cusItem.id">
				<view class="name-box">
					<text>{{ cusItem.name }}</text>
					<text class="type-text">{{ cusItem.identity }}</text>
				</view>
				<view class="">类型：{{ cusItem.lawyer_type }}</view>
				<view class="">电话：{{ cusItem.mobile }}</view>
				<view class="">地址：{{ cusItem.address }}</view>
			</view>
		</block>

		<!-- 底部按钮 -->
		<bottom-btn text="添加客户" @click="addCusBtnClick"></bottom-btn>
	</view>
</template>

<script>
export default {
	data() {
		return {
			sortData: {
				page: 1,
				page_size: 10,
			},
			// 客户数据列表
			cusDataList: []
		};
	},
	onLoad() {
		this.getDataList()
	},
	async onPullDownRefresh() {
		this.sortData.page = 1
		this.cusDataList = []
		await this.getDataList()
		uni.stopPullDownRefresh()
		this.$u.toast('页面数据已刷新')
	},
	onReachBottom() {
		this.sortData.page += 1
		this.getDataList()
	},
	onShow() {
		if(this.vuex_isSubmit) {
			this.sortData.page = 1
			this.cusDataList = []
			this.getDataList()
			this.$u.vuex('vuex_isSubmit', false)
		}
	},
	methods: {
		async getDataList() {
			const res = await this.$u.api.getCustomerList(this.sortData)
			if(!res) return
			if(res.length < 1) return this.sortData.page = this.sortData.page < 2 ? 1 : (this.sortData.page - 1)
			
			this.cusDataList = [...this.cusDataList, ...res]
			// console.log(this.cusDataList);
		},
		// 添加客户 按钮的点击事件
		addCusBtnClick() {
			this.$u.route('/myPackageA/pages/views/add-customer');
		}
	}
};
</script>

<style lang="scss" scoped>
.customer-container-box {
	width: 750rpx;
	min-height: 100vh;
	background-color: $u-bg-color;
	padding-top: 20rpx;
	padding-bottom: 90rpx;
	.cus-item {
		width: 750rpx;
		height: 207rpx;
		background: #ffffff;
		border-bottom: 1px solid #e7eaf0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding: 25rpx 26rpx 25rpx 23rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
		.name-box {
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141418;
		}
		.type-text {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #97979f;
		}
	}
}
.my-journal-null-box {
	width: 750rpx;
	height: 100%;

	.logo-box {
		height: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		.logo-text {
			margin-top: 50rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 42rpx;
		}
	}
}
</style>
